<template>
  <div class="index-recommend">
    <div class="title">热销推荐</div>
    <div class="content">
      <div class="list" v-for="item of recommendList" :key="item.id">
        <img class="list-img" :src="item.imgUrl" alt="" mode="widthFix">
        <div class="list-info">
          <p class="name">{{item.title}}</p>
          <p class="desc">{{item.desc}}</p>
          <button class="list-more">查看详情</button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default{
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .title
    padding: .24rem
    background: #17a3ab
    margin-top:.2rem
    color: #f1f1f1
  .content
    padding: .24rem
    .list
      display: flex
      margin-bottom: .14rem
      .list-img
        width: 2rem
        height: 2rem
      .list-info
        flex: 1
        ellipsis()
        min-width: 0
        .name
          padding: .14rem
        .desc
          padding: .14rem
        .list-more
          padding: .1rem .2rem
          background: #FF851B
          color: #fff
          border-radius: .08rem
          font-size: .24rem
          margin-top: .24rem
          margin-left: .14rem
</style>
